<template>
  <!-- 来电未接报表 -->
  <div class="missedCalls">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="skillId" label="技能队列">
            <el-select
              v-model="formData.skillId"
              multiple
              clearable
              filterable
              placeholder="请选择技能组"
            >
              <el-option
                v-for="(g, i) in skillGroupList"
                :key="i"
                :value="g.skillNo"
                :label="g.skillName"
              />
            </el-select></el-form-item>
          <el-form-item prop="missedType" label="未接类型">
            <el-select v-model="formData.missedType" filterable clearable>
              <el-option v-for="(d,i) in missedTypeList" :key="i" :label="d.dictName" :value="d.dictCode" />
            </el-select>
          </el-form-item>
          <el-form-item prop="callerNo" label="来电号码">
            <el-input v-model="formData.callerNo" placeholder="请输入来电号码" clearable></el-input>
          </el-form-item>
          <el-form-item prop="callDate" label="来电日期">
            <el-date-picker
              v-model="formData.callDate"
              opt
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :limite="new Date()"
              operator=">"
              clearable
            />
          </el-form-item>
          <el-form-item prop="ivrMenuNos" label="IVR选项">
            <CustomDictSelect
              placeholder="请选择"
              dict-type-code="IVR_OPTIONS"
              bind-name="dictName"
              bind-value="dictCode"
              filterable
              :echo-value.sync="formData.ivrMenuNos"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <ExportPane :table-config="tableConfig" :other-raw="otherRaw" :query-data-fun="queryHandle" filename="来电未接报表">导出</ExportPane>
            <Button type="primary" :loading="loading" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :table-config="tableConfig" :other-raw="otherRaw" :other-filters="otherFilters">
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import CustomDictSelect from '@/components/CustomDictSelect'
import Button from '@/components/Button'
import { filtersRaw, date24, deepCopy, parseTime } from '@/utils'
import { getSkillGroup } from '@/api/skillGroup'
import { ccDict } from '@/api/dataDict'
import { mapGetters } from 'vuex'
import ExportPane from '@/components/ExportPane'
export default {
  name: 'ReportFormMissedCalls',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    ExportPane,
    CustomDictSelect
  },
  data() {
    // 验证时间
    const validateDate = (r, v, c) => {
      if (v instanceof Array && v.length === 2) {
        c()
      } else {
        c(new Error('请选择日期'))
      }
    }
    return {
      skillGroupList: [], // 技能队列
      missedTypeList: [], // 未接类型
      otherFilters: [],
      otherRaw: {},
      formData: {
        missedType: '',
        skillId: [],
        callerNo: '',
        callDate: [],
        ivrMenuNos: ''
      },
      formRules: {
        callDate: {
          required: true,
          validator: validateDate,
          trigger: 'change'
        }
      },
      loading: false,
      tableConfig: {
        interfacePath: '/call-center/api/v1/tCallMissed/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'callDate',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            prop: 'callDate',
            label: '来电日期'
          },
          {
            prop: 'callTime',
            label: '来电时间'
          },
          {
            prop: 'callerNo',
            label: '来电号码'
          },
          {
            prop: 'missedType',
            label: '未接类型',
            formatData: this.getDictName.bind(this)
          },
          {
            prop: 'skillId',
            label: '技能队列',
            formatData: this.getSkillName.bind(this)
          },
          {
            prop: 'deviceNo',
            label: '坐席姓名',
            formatData: v => {
              let t = ''
              if (v.staffName && v.accountNo) {
                t = `${v.staffName}(${v.accountNo})`
              }
              return t
            }
          },
          {
            prop: 'ivrMenuNos',
            label: 'IVR选项',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'call-center',
              dictTypeCode: 'IVR_OPTIONS'
            }
          }
        ]
      },
      // 技能id与名称
      skillIdList: {},
      missedTypeNameList: {} // 未接类型名称
    }
  },
  computed: {
    ...mapGetters(['deptList', 'groupList', 'firstGroup', 'firstDept'])
  },
  created() {
    // 获取数据
    this.getMissedType()
    this.getSkillGroup()
  },
  methods: {
    // 根据条件查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const d = deepCopy(this.formData)
        const list = []
        if (d.callDate && d.callDate.length > 0) {
          list.push(filtersRaw('callDate', parseTime(d.callDate[0], '{y}{m}{d}'), '>='))
          list.push(filtersRaw('callDate', parseTime(date24(d.callDate[1]), '{y}{m}{d}'), '<'))
        }
        if (d.callerNo !== '') {
          list.push(filtersRaw('callerNo', d.callerNo, '='))
        }
        const paramsRaw = {}
        if (d.ivrMenuNos) {
          paramsRaw.ivrMenuNos = d.ivrMenuNos
        }
        if (d.skillId && d.skillId.length > 0) {
          paramsRaw.skillId = `[${d.skillId.join(',')}]` // (filtersRaw('skillId', `[${d.skillId.join(',')}]`, 'in'))
        }
        if (d.missedType !== '') {
          // paramsRaw.push(filtersRaw('missedType', d.missedType, '='))
          paramsRaw.missedType = d.missedType
        }
        this.otherFilters = list
        this.otherRaw = paramsRaw
        if (type !== 'export') {
          this.$nextTick(() => {
            this.$refs.table.initTableData()
          })
        }
        return list
      })
    },
    // 根据技能id获取技能名称
    getSkillName(row) {
      const skillId = (row.skillId || '').split(',')
      const t = []
      for (const s of skillId) {
        const name = this.skillIdList[s]
        if (name) {
          t.push(name)
        }
      }
      return t.join(',')
    },
    // 获取字典名称
    getDictName(row) {
      const missedType = (row.missedType || '').split(',')
      const t = []
      for (const mt of missedType) {
        const name = this.missedTypeNameList[mt]
        if (name) {
          t.push(name)
        }
      }
      return t.join(',')
    },
    // 获取技能组
    getSkillGroup() {
      return getSkillGroup().then(res => {
        this.skillGroupList = res.data
        const d = {}
        for (const item of this.skillGroupList) {
          d[item.skillNo] = item.skillName
        }
        this.skillIdList = d
      })
    },
    // 获取未接类型
    getMissedType() {
      ccDict('NO_ANSWER_TYPE').then(res => {
        this.missedTypeList = res.data
        const d = {}
        for (const item of this.missedTypeList) {
          d[item.dictCode] = item.dictName
        }
        this.missedTypeNameList = d
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
